<template>
  <div>
    <el-table :data="data" ref="multipleTable" stripe>
      <el-table-column prop="api_name" label="接口名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="hold_user" label="持有人" show-overflow-tooltip></el-table-column>
      <el-table-column prop="cron" label="定时" show-overflow-tooltip></el-table-column>
      <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="任务状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0">待启动</el-tag>
          <el-tag type="primary" v-if="scope.row.status === 1">执行中</el-tag>
          <el-tag type="success" v-if="scope.row.status === 2">已停止</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 3">已删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-link type="primary" disabled>修改</el-link>
          <el-link type="primary" :value="12" @click="changeItem('是否开启任务？','HaveChecked',scope.row._id)">开启</el-link>
          <el-link type="success" @click="changeItem('是否关闭任务？','Unused',scope.row._id)">关闭</el-link>
          <el-link type="danger" @click="changeItem('是否删除任务？','HaveDeleted',scope.row._id)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import JsonViewer from "vue-json-viewer";
import utils from "../../assets/js/utils";
import {queryHandler} from "../../assets/js/task";

export default {
  mounted() {
    this.query()
  },
  components: {
    JsonViewer
  },
  props: {
    api_name: ''
  },
  data() {
    return {
      data: [],
      total: [],
      pageInfo: {
        page: 1,
        pageSize: 10,
        filter: {},
      }
    }
  },
  name: "design-task",
  methods: {
    query: function () {
      let that = this
      let page = that.pageInfo.page
      let page_size = that.pageInfo.pageSize
      let filter = {api_name: this.api_name}
      if (!utils.isEmpty(that.pageInfo.api_name)) {
        filter['api_name'] = that.pageInfo.api_name
      }
      if (!utils.isEmpty(that.pageInfo.group_name)) {
        filter['group_name'] = that.pageInfo.group_name
      }
      queryHandler(filter, page, page_size).then((response) => {
        if (response.data.code === 0) {
          this.data = response.data.result.data
          this.total = response.data.result.total
        }
      })
    },
    changeItem: function (message, action, id) {
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        utils.updateStatus("task", action, id)
        this.query()
      }).catch(() => {
        this.$message({
          message: "已取消",
          type: "info"
        })
      })
    },
  }
}
</script>

<style scoped>

</style>